@charset "UTF-8";

@import '~scss/themes/index.scss';

$conponent-name: 'page';

/**
  页面样式类
*/

@mixin page-scroll() {
  width: 100%;
  height: 100%;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
  margin-bottom: -1px;
  // 对于滚动的页面布局 一般会在底部留下一定的空白距离，不让内容紧紧贴在底部
  &:after {
    content: '';
    display: block;
    width: 100%;
    height: $page--padding-bottom;
  }
}

.ui-#{$conponent-name} {
  margin: 0 auto;
  max-width: $max-width;
  min-width: $min-width;
  overflow: hidden;

  &.ui-page__flex {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: $max-width;
    min-width: $min-width;
  }

  &.ui-page__scroll {
    @include page-scroll();
  }

  &.page__has-bottom {
    display: flex;
    flex-direction: column;
    height: 100%;

    .page-container {
      @include page-scroll();
    }

    // 页面 tabber
    .page-bottom {
      flex: 0 0 $page-tabber-height;
      z-index: 100;
      width: 100%;
      background-color: #fff;
      -webkit-user-select: none;
      user-select: none;
    }
  }
}

// 各个平台的优化处理
// 对于IOS平台
.ios .ui-page.ui-page__scroll {
}
